<template>
    <div id="text2pic">
        <h3>模型选择</h3>
        <el-select v-model="checkpoint" placeholder="模型选择" style="width: 240px">
            <el-option v-for="item in checkpointList" :key="item" :label="item" :value="item" />
        </el-select>

        <div class="preproduce">
            <!-- 左侧提示词和Lora开始 -->
            <div class="prompt" style="width: 70%;">
                <PromptInput title="正向提示词" prompt="您希望的样子" tip="系统提示词" />
                <PromptInput title="反向提示词" prompt="您讨厌生成的样子" tip="系统提示词" />
            </div>
            <!-- 左侧提示词和Lora结束 -->
            <!-- 生图查看开始 -->
            <div class="piclook">
                <div class="start-create">开始生成
                    <svg t="1722242903660" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5188" width="20" height="20">
                        <path d="M512 64.32L288.05 512.44l222.61 111.81-110.63 335.43 335.92-447.24-225.29-111.81z"
                            fill="#FFD500" p-id="5189"></path>
                    </svg>34
                </div>
                <div class="operation">
                    <el-tooltip content="复制生成信息">
                        <el-icon>
                            <CopyDocument></CopyDocument>
                        </el-icon>
                    </el-tooltip>
                    <el-tooltip content="清空生成信息">
                        <el-icon>
                            <DeleteFilled style="color:red;"></DeleteFilled>
                        </el-icon>
                    </el-tooltip>
                </div>
                <div style="width:90%;margin:0 auto;text-align:center;background-color:rgba(0,0,0,0.1);line-height:40px;border-radius:5px;">生成队列</div>
            </div>
            <!-- 生图查看结束 -->
        </div>

        <!-- 生成图片配置开始 -->
        <div class="picture-setting">
            <div class="setting">
                <h3>采样方法</h3>
                <el-select v-model="checkpoint" placeholder="模型选择">
                    <el-option v-for="item in checkpointList" :key="item" :label="item" :value="item" />
                </el-select>

                <div class="size">
                    <div class="width px">
                        <div>宽</div>
                        <el-input v-model="picWidth" type="number"></el-input>
                        <div>px</div>
                    </div>
                    <div class="change">
                        <el-icon>
                            <Switch />
                        </el-icon>
                    </div>
                    <div class="height px">
                        <div>高</div>
                        <el-input v-model="picHeight" type="number"></el-input>
                        <div>px</div>

                    </div>
                </div>

                <h3>生成图片数量</h3>
                <div class="pic-number">
                    <span class="blue">1</span>
                    <span class="blue">2</span>
                    <span class="yellow">3</span>
                    <span class="yellow">4</span>
                    <span class="yellow">5</span>
                    <span class="yellow">6</span>
                </div>
                <h3>Lora</h3>
                <el-select v-model="checkpoint" placeholder="模型选择" style="width: 240px">
                    <el-option v-for="item in checkpointList" :key="item" :label="item" :value="item" />
                </el-select>
                <h3>Hypernetworks</h3>
                <el-select v-model="checkpoint" placeholder="模型选择" style="width: 240px">
                    <el-option v-for="item in checkpointList" :key="item" :label="item" :value="item" />
                </el-select>

            </div>
            <el-watermark style="width: 48%;" content="AiSpace">
                <div class="picture"></div>

            </el-watermark>
        </div>
        <!-- 生成图片配置结束 -->

    </div>
</template>

<script setup>
import { ref } from 'vue';
import PromptInput from '../functioncomp/PromptInput.vue';
import { Switch, CopyDocument, DeleteFilled } from "@element-plus/icons-vue"


var checkpoint = ref("基础模型_v3.safetensors")
const checkpointList = [
    "基础模型_v3.safetensors",
    "基础算法_V1.5.safetensors"
]

// 图片的宽和高
var picWidth = ref(1024)
var picHeight = ref(512)


</script>

<style scoped>
#text2pic {
    padding: 20px;
}

#text2pic .preproduce {
    display: flex;
    display: -webkit-flex;
    border: 2px solid rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-top: 20px;
    border-radius: 5px;
}

#text2pic .preproduce .piclook {
    width: 30%;
}

#text2pic .preproduce .piclook .start-create {
    width: 90%;
    height: 60px;
    margin: 0 auto;
    font-size: 15px;
    font-weight: bolder;
    line-height: 60px;
    color: white;
    border-radius: 10px;
    background-image: linear-gradient(to right, #409EFF, #337ecc);
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}

#text2pic .preproduce .piclook .operation {
    font-size: 20px;
    line-height: 60px;
    width: 90%;
    margin: 0 auto;
}

#text2pic .preproduce .piclook .operation .el-icon {
    margin-right: 10px;
    cursor: pointer;
}

#text2pic .picture-setting {
    display: flex;
    display: -webkit-flex;
    border: 2px solid rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-top: 20px;
    border-radius: 5px;
    justify-content: space-between;
}

#text2pic .picture-setting .setting {
    width: 48%;
}


#text2pic .picture-setting .picture {
    height: 100%;
    border-radius: 5px;
    border: 5px solid rgba(0, 0, 0, 0.1);
}

#text2pic .picture-setting .setting .size {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

#text2pic .picture-setting .setting .size .px {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}


#text2pic .picture-setting .setting .size .px .el-input {
    margin: 0 10px;
}

#text2pic .picture-setting .setting .pic-number {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
}


#text2pic .picture-setting .setting .pic-number {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
}


#text2pic .picture-setting .setting .pic-number span {
    padding: 5px 30px;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    margin-right: 10px;
}


#text2pic .picture-setting .setting .pic-number .blue {
    color: #409EFF;
    border: 1px solid #409EFF;
}


#text2pic .picture-setting .setting .pic-number .yellow {
    color: #e6a23c;
    border: 1px solid #e6a23c;
}
</style>